<!doctype html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    overflow: hidden;

  }

  .box {
    font-size: 0;
    width: 1280px;
    height: 720px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #000;
  }

  .box>div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
  }

  .box>div>div {
    position: absolute;
    transform-style: preserve-3d;
    line-height: 0;
    font-size: 0;
  }
</style>

<body>
  <div class='box'></div>
  <script>
    const imgs = [1, 2, 3, 4].map(v =>'https://source.unsplash.com/random/1280x720?' + v + '.jpg');
    let zIndex = 99999;
    let index = 0;
    const $box = document.querySelector('.box');
    boom(16, 9);
    function boom(x, y) {
      const $parent = document.createElement('div');
      zIndex--;
      $parent.style.zIndex = zIndex;
      $box.appendChild($parent);
      for (let i = 0; i < y; i++) {
        for (let j = 0; j < x; j++) {
          const $effectFragument = document.createElement('div');
          const styles = {
            background: `url(${imgs[index]})`,
            width: $box.clientWidth / x + 'px',
            height: $box.clientHeight / y + 'px',
            left: $box.clientWidth / x * j + 'px',
            top: $box.clientHeight / y * i + 'px',
            'background-position-x': ($box.clientWidth / x * -j) + 'px',
            'background-position-y': ($box.clientHeight / y * -i) + 'px',
            transition: (Math.random() + 0.5) + 's'
          }
          const cssText = Object.keys(styles).reduce((o, v) => {
            return o += `${v}: ${styles[v]};`
          }, '');
          console.log(cssText);
          $effectFragument.style.cssText = cssText;
          $parent.appendChild($effectFragument);
        }
      }
      const $childrens = $parent.children;
      setTimeout(() => {
        index++;
        index = index % imgs.length;
        boom(16, 9);
        [...$childrens].forEach(e => {
          const str = `perspective(800px) rotateX(${Math.random() * 500 - 250}deg) rotateY(${Math.random() * 500 - 250}deg) translateX(${Math.random() * 500 - 250}px) translateY(${Math.random() * 500 - 250}px) translateZ(${Math.random() * 1000 - 500}px)`;
          e.style.transform = str;
          // console.log(e.style.transform, str);
          e.style.opacity = 0;
        });
      }, 2000);
      setTimeout(()=> $parent.remove(), 3500);
    }
  </script>
</body>

</html>